import './userinfo.scss'
import { Progress, Table } from 'antd';
import { useEffect, useState, useRef } from 'react';
import { setuptUserInfo } from '../../api/setup';
import { Button, Modal, message, Drawer, Form, Input } from 'antd';
import { connect } from 'react-redux';
const App = ({ adminInfo }) => {
    const [data, setData] = useState([])
    const [data2, setData2] = useState([])
    const [imgContent, getImgContent] = useState('https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png')
    const [imgContent2, getImgContent2] = useState('https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png')
    const [num, setNum] = useState(0)
    const [flag, setFlag] = useState(false)
    const [useIf, setUseIf] = useState(false)
    const [messageApi, contextHolder] = message.useMessage();
    const inputRef = useRef()
    useEffect(() => {
        setuptUserInfo({
            adminname: 'admin'
        }).then(res => {
            setData(res.data.data)
            setData2(res.data.data2)
            // const num2=0
            for (let k in res.data.data[0]) {
                // console.log(res.data.data[0][k]);
                if (res.data.data[0][k] !== '未设置') {
                    setNum((prevPercent) => {
                        const newPercent = prevPercent + 1;
                        // console.log(newPercent);
                        return newPercent;
                    });
                }
            }
            for (let k in res.data.data2[0]) {
                if (res.data.data2[0][k] !== '未设置') {
                    setNum((prevPercent) => {
                        const newPercent = prevPercent + 1;
                        return newPercent;
                    });
                }
            }
            setFlag(true)

        })
    }, [])
    const columns = [
        {
            title: '微信',
            dataIndex: 'weichat',
            key: 'weichat',
        },
        {
            title: '邮箱',
            dataIndex: 'email',
            key: 'email',
        },
        {
            title: 'QQ',
            dataIndex: 'qq',
            key: 'qq',
        },
        {
            title: '年纪偏好',
            dataIndex: 'hobby',
            key: 'hobby',
        },
        {
            title: '第一科目',
            dataIndex: 'first',
            key: 'first',
        },
        {
            title: '第二科目',
            dataIndex: 'second',
            key: 'second',
        },
        {
            title: '年级',
            dataIndex: 'class',
            key: 'class',
        },
    ];
    const columns2 = [
        {
            title: '高考所在地',
            dataIndex: 'location',
            key: 'location',
        },
        {
            title: '文理科',
            dataIndex: 'subject',
            key: 'subject',
        },
        {
            title: '在读院校',
            dataIndex: 'school',
            key: 'school',
        },
        {
            title: '最高学历',
            dataIndex: 'study',
            key: 'study',
        },
        {
            title: '专业',
            dataIndex: 'zhuanye',
            key: 'zhuanye',
        }
    ];
    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = (data) => {
        setUseIf(data)
        setIsModalOpen(true);
    };
    const handleOk = () => {
        setIsModalOpen(false);
        getImgContent(imgContent2)
    };
    const handleOk2 = () => {
        showDrawer()
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        inputRef.current.click()
        // setIsModalOpen(false);

    };
    const [open, setOpen] = useState(false);
    const showDrawer = () => {
        setOpen(true);
    };
    const onClose = () => {
        setOpen(false);
    };
    const handleCancel2 = () => {
        setIsModalOpen(false);
    };
    const onFinish = (values) => {
        for (let k in values) {
            if (!values[k]) {
                values[k] = '未设置'
            }
        }
        console.log(values);
        setData([{
            class: values.class,
            email: values.email,
            first: values.first,
            hobby: values.hobby,
            qq: values.qq,
            second: values.second,
            weichat: values.weichat,
        }])
        setData2([{
            location: values.location,
            school: values.school,
            study: values.study,
            subject: values.subject,
            zhuanye: values.zhuanye,
        }])
        for (let k in values) {
            // console.log(values[k]);
            if (values[k] !== '未设置') {
                setNum((prevPercent) => {
                    const newPercent = prevPercent + 1;
                    // console.log(newPercent);
                    return newPercent;
                });
            }
        }
        messageApi.open({
            type: 'success',
            content: '编辑成功',
        });
        onClose()
    };
    return (
        <div className="userinfo">
            {contextHolder}
            <Drawer title="编辑" placement="right" onClose={onClose} open={open}>
                <div className='formBox'>
                    <Form
                        name="basic"
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        style={{
                            maxWidth: 600,
                        }}
                        onFinish={onFinish}
                    >
                        <Form.Item
                            label="微信"
                            name="weichat"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="邮箱"
                            name="email"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="QQ"
                            name="qq"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="年纪偏好"
                            name="hobby"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="第一科目"
                            name="first"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="第二科目"
                            name="second"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="年级"
                            name="class"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="高考所在地"
                            name="location"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="文理科"
                            name="subject"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="在读院校"
                            name="school"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="最高学历"
                            name="study"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="专业"
                            name="zhuanye"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            wrapperCol={{
                                offset: 8,
                                span: 16,
                            }}
                        >
                            <Button type="primary" htmlType="submit">
                                提交
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </Drawer>
            <Modal closable={false} maskClosable={false} title={useIf ? '个人信息填写说明' : "修改头像"} open={isModalOpen} onOk={() => {
                useIf ? handleOk2() : handleOk()
            }} onCancel={() => {
                useIf ? handleCancel2() : handleCancel()
            }} cancelText={useIf ? '取消' : '点击上传'} okText={useIf ? '开始填写' : '保存修改'}>
                {
                    useIf ? (
                        <>
                            <p>由于系统检测您未在客户端填写过个人信息为了不影响您的<span className='redBox'>工资发放</span>和<span className='redBox'>等级评定</span>,请尽快完善个人信息。</p>
                            <div className='messageInfo'>
                                个人信息完善需一次性完成,需准备以下材料,
                                <br />
                                如材料未准备齐全,可点击“取消”返回上一级界面。
                                <br />
                                1.高清身份证正反面照片;
                                <br />
                                2.高清银行卡正反面照片;
                                <br />
                                3.银行卡开户行;
                                <br />
                                4.兼职协议第一、二页高清照片 (全职教师可没有);
                                <br />
                                5.学生证、教师资格证高清照片 (不是学生可没有)。
                            </div>
                            <div>
                                信息一旦填写，<span className='redBox'>无法在此客户端更改</span>。请认真填写确保信息准确。
                            </div>
                        </>) : (
                        <>
                            <img style={{ width: 200, height: 200 }} src={imgContent2} alt={''} />
                            <input hidden ref={inputRef} type="file" onChange={(e) => {
                                const reader = new FileReader()
                                reader.readAsDataURL(e.target.files[0])
                                reader.onload = () => {
                                    getImgContent2(reader.result)
                                }
                            }}></input>
                        </>)
                }
            </Modal>
            <div className='userinfo_header'>
                <span>个人资料</span>
                <span onClick={() => {
                    showModal(true)
                }}>编辑</span>
            </div>
            <div className='pricture'>
                {/* <Pricture/> */}
                <div className='pricture_left'>
                    <img src={imgContent} alt={''} />
                    <Button type="primary" onClick={() => {
                        showModal(false)
                    }}>更换头像</Button>
                </div>
                <div className='pricture_right'>
                    <span>姓名:{adminInfo.username}</span>
                    <span>手机号:{adminInfo.phone}</span>
                    <span>id:{adminInfo.id}</span>
                    {
                        flag ? (<div>资料完成度：<Progress percent={parseInt(num / 12 * 100)} /></div>) : ''
                    }
                </div>
            </div>
            <div className='table'>
                <Table columns={columns} dataSource={data} pagination={false} rowKey='weichat' />
                <br />
                <br />
                <br />
                <Table columns={columns2} dataSource={data2} pagination={false} rowKey='location' />
            </div>
        </div>
    )
}
const mapStateToprops = (state) => {
    return {
        adminInfo: state.getIn(['login', 'adminInfo'])
    }
}
const mapDispathToprops = (dispath) => {
    return {
    }
}
export default connect(mapStateToprops, mapDispathToprops)(App)